<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.big{
				
				width: 500px;
				height: 800px;
				background-color: aquamarine;
			}
			.btn{
				background-color: darksalmon;
				width: 200px;
				height: 100px;
			}
			#t{
				width: 100%;
				height: 40px;
				background-color: aliceblue;
			}
			#s{
				margin: auto;
				font-size: 40px;
				border-bottom: cornsilk solid 1px;
			}
			
		</style>
	</head>
	<body>
	<div class="big">
		<div class="btn">
			<button>点击</button>
		</div>
	</div>
	<!-- 
	 事件流：
	 DOM对象.addEventListener(type,callback,[capture])
	 1.capture为可选参数，布尔类型
	 如果是true，表示捕获阶段调用事件处理程序；
	 如果是false(默认值)，表示在冒泡阶段调用事件处理程序。
	 2.事件对象：事件处理函数中的第一个参数(evt,event,e)
	 a.触发该事件的元素
	 b.鼠标事件
	 c.
	 d.
	 
	 -->
	 <table id="t">
		<tr id="s">
			<td>序号</td>
			<td>序号</td>
			<td>序号</td>
			<td>序号</td>
		</tr>
		<tr id="s">
			<td>序号</td>
			<td>序号</td>
			<td>序号</td>
			<td>序号</td>
		</tr>
		
	
	 </table>
	</body>
	<script>
		//事件源
	// const btn=document.querySelector('.btn');	
	// //事件绑定
	//  btn.addEventListener('click',function(evt){
	// 	 console.log(evt);
	// 	 console.log(evt.type);//事件类型
	// 	 console.log(evt.target);//实际触发事件元素
	// 	 evt.stopPropagation();//阻止事件传播
	// 	 alert('别点我');
	//  });
	// const ck=document.querySelector('.big');
	// ck.addEventListener('click',function(evt){
	// 	 evt.stopPropagation();//阻止事件传播
	// 	alert('休息');
	// });
	// document.addEventListener('click',function(evt){
	// 		alert('摆烂');
	// 	},true)
		const th=document.querySelector('#s');
		th.addEventListener('click',function(evt){
			evt.target.style.backgroundColor='grey';
			
		})
		
	</script>
</html>
